<template>
  <view class="picshow-container">
    <!-- 页面标题和搜索区域，根据滚动方向显示或隐藏 -->
    <view class="picshow-header-container" :class="{ 'header-hidden': isHeaderHidden }">
      <!-- 页面标题 -->
      <view class="picshow-header" :style="{ paddingTop: `${statusBarHeight + 40}rpx` }">
        <view class="nav-back" @click="goBack">
          <my-icon name="arrow-left" :size="24" color="var(--text-color)" />
        </view>
        <text class="page-title">图片浏览</text>
        
        <!-- 布局切换按钮 -->
        <view class="layout-toggle" @click="toggleLayout">
          <my-icon :name="isDoubleColumn ? 'view-list' : 'view-grid'" :size="24" color="var(--text-color)" />
        </view>
      </view>
      
      <!-- 搜索区域 -->
      <view class="search-container">
        <view class="search-box">
          <my-icon name="search" :size="20" color="var(--text-color-secondary)" />
          <input 
            class="search-input" 
            v-model="searchQuery" 
            placeholder="输入关键词搜索图片" 
            confirm-type="search"
            @confirm="handleSearch"
          />
          <view class="search-clear" v-if="searchQuery" @click="clearSearch">
            <my-icon name="close-circle" :size="20" color="var(--text-color-secondary)" />
          </view>
        </view>
        <view class="search-btn" @click="handleSearch">搜索</view>
      </view>
      
      <!-- 翻译显示区域 -->
      <view class="translate-container" v-if="showTranslation || isAILoading">
        <view class="translate-content">
          <text class="original-text">原文: {{originalQuery}}</text>
          <view class="translated-text-container">
            <text class="translated-text">翻译: {{translatedQuery}}</text>
            <view v-if="isAILoading" class="typing-indicator">
              <view class="dot"></view>
              <view class="dot"></view>
              <view class="dot"></view>
            </view>
          </view>
        </view>
        <view class="translate-actions" v-if="!isAILoading">
          <view class="translate-action" @click="useTranslation">使用翻译</view>
          <view class="translate-action" @click="cancelTranslation">取消</view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view 
      class="picshow-content" 
      :class="{ 'fullscreen': isHeaderHidden }"
      scroll-y 
      enable-back-to-top
      @scrolltolower="loadMoreImages"
      @scroll="handleScroll"
      :scroll-top="scrollTop"
    >
      <!-- 加载中提示 -->
      <view class="loading-container" v-if="isLoading && !images.length">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 无结果提示 -->
      <view class="empty-container" v-if="!isLoading && !images.length">
        <my-icon name="image-off" :size="64" color="var(--text-color-secondary)" />
        <text class="empty-text">没有找到相关图片</text>
        <view class="empty-action" @click="handleSearch">重新搜索</view>
      </view>
      
      <!-- 瀑布流布局 -->
      <view v-if="isDoubleColumn" class="waterfall-container">
        <view class="waterfall-column">
          <view 
            class="waterfall-item" 
            v-for="(item, index) in leftColumnImages" 
            :key="'left-' + index"
            @click="previewImage(item.imageUrl || item.url, getOriginalIndex(index, 'left'))"
          >
            <view class="image-placeholder" :style="{ paddingBottom: (item.aspectRatio * 100) + '%' }"></view>
            <image 
              class="waterfall-image" 
              :src="item.imageUrl || item.url" 
              mode="widthFix" 
              lazy-load
              @load="onImageLoad(item, index, 'left')"
            />
          </view>
        </view>
        <view class="waterfall-column">
          <view 
            class="waterfall-item" 
            v-for="(item, index) in rightColumnImages" 
            :key="'right-' + index"
            @click="previewImage(item.imageUrl || item.url, getOriginalIndex(index, 'right'))"
          >
            <view class="image-placeholder" :style="{ paddingBottom: (item.aspectRatio * 100) + '%' }"></view>
            <image 
              class="waterfall-image" 
              :src="item.imageUrl || item.url" 
              mode="widthFix" 
              lazy-load
              @load="onImageLoad(item, index, 'right')"
            />
          </view>
        </view>
      </view>
      
      <!-- 单列模式 -->
      <view v-else class="single-column-container">
        <view 
          class="single-column-item" 
          v-for="(item, index) in images" 
          :key="index"
          @click="previewImage(item.imageUrl || item.url, index)"
        >
          <image 
            class="single-column-image" 
            :src="item.imageUrl || item.url" 
            mode="widthFix" 
            lazy-load
          />
        </view>
      </view>
      
      <!-- 底部加载更多 -->
      <view class="load-more" v-if="images.length > 0">
        <text v-if="isLoadingMore">加载更多中...</text>
        <text v-else-if="hasMore">上拉加载更多</text>
        <text v-else>没有更多图片了</text>
      </view>
    </scroll-view>
    
    <!-- 悬浮返回顶部按钮，仅在头部隐藏时显示 -->
    <view class="float-action" v-if="isHeaderHidden && showBackToTop" @click="scrollToTop">
      <my-icon name="arrow-up" :size="24" color="#fff" />
    </view>
    
    <!-- 悬浮刷新按钮 -->
    <view class="float-refresh" v-if="isHeaderHidden" @click="refreshImages">
      <my-icon name="refresh" :size="24" color="#fff" />
    </view>
    
    <!-- 隐藏的AI聊天组件 -->
    <ai-chat ref="aiChat" @ai-message="handleAIMessage"
      @messages-updated="handleMessagesUpdated" @loading="handleAILoading" @error="handleAIError"></ai-chat>
  </view>
</template>

<script>
import { getPic } from '@/utils/img.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      searchQuery: '',
      originalQuery: '', // 原始搜索内容
      translatedQuery: '', // 翻译后的搜索内容
      showTranslation: false, // 是否显示翻译结果
      isAILoading: false, // AI是否正在加载
      translationTimeout: null, // 翻译超时定时器
      maxTranslationTime: 20000, // 最大翻译时间(毫秒)
      images: [],
      leftColumnImages: [],
      rightColumnImages: [],
      leftColumnHeight: 0,
      rightColumnHeight: 0,
      currentPage: 0,
      pageSize: 20,
      hasMore: true,
      isLoading: false,
      isLoadingMore: false,
      isRefreshing: false,
      isDoubleColumn: true,
      showNotice: true,
      imageQueue: [], // 图片加载队列
      isProcessingQueue: false, // 是否正在处理队列
      isHeaderHidden: false, // 头部是否隐藏
      lastScrollTop: 0, // 上次滚动位置
      scrollDirection: 'down', // 滚动方向
      scrollThreshold: 20, // 滚动阈值
      scrollTop: 0, // 滚动位置
      showBackToTop: false, // 是否显示返回顶部按钮
      // 示例图片仅用于开发测试
      demoImages: [
        { url: '/static/images/demo1.jpg', title: '示例图片 1' },
        { url: '/static/images/demo2.jpg', title: '示例图片 2' },
        { url: '/static/images/demo3.jpg', title: '示例图片 3' },
        { url: '/static/images/demo4.jpg', title: '示例图片 4' },
      ]
    }
  },
  
  onLoad() {
    this.getStatusBarHeight();
    this.loadImages();
  },
  
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 0;
        
        // #ifdef H5
        if (systemInfo.platform === 'web') {
          this.statusBarHeight = 0;
        }
        // #endif
      } catch (e) {
        console.error('获取状态栏高度失败:', e);
        this.statusBarHeight = 0;
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 处理滚动事件
    handleScroll(e) {
      const scrollTop = e.detail.scrollTop;
      
      // 显示或隐藏返回顶部按钮
      this.showBackToTop = scrollTop > 300;
      
      // 计算滚动方向
      const currentDirection = scrollTop > this.lastScrollTop ? 'up' : 'down';
      
      // 如果方向改变，重置计数
      if (currentDirection !== this.scrollDirection) {
        this.scrollDirection = currentDirection;
      }
      
      // 根据滚动方向和阈值决定是否隐藏头部
      if (this.scrollDirection === 'up' && scrollTop > 50) { // 降低阈值，更快响应
        if (!this.isHeaderHidden) {
          this.isHeaderHidden = true;
        }
      } else if (this.scrollDirection === 'down' && scrollTop < 30) { // 降低阈值
        if (this.isHeaderHidden) {
          this.isHeaderHidden = false;
        }
      }
      
      // 更新上次滚动位置
      this.lastScrollTop = scrollTop;
    },
    
    // 滚动到顶部
    scrollToTop() {
      this.scrollTop = 0;
      this.isHeaderHidden = false;
      setTimeout(() => {
        this.scrollTop = 0; // 再次设置确保生效
      }, 50);
    },
    
    // 加载图片
    async loadImages(isRefresh = false) {
      if (isRefresh) {
        this.currentPage = 0;
        this.hasMore = true;
        this.leftColumnImages = [];
        this.rightColumnImages = [];
        this.leftColumnHeight = 0;
        this.rightColumnHeight = 0;
        this.imageQueue = []; // 清空队列
        this.isProcessingQueue = false;
      }
      
      if (!this.hasMore && !isRefresh) return;
      
      try {
        this.isLoading = true;
        
        // 计算跳过的数量
        const skip = this.currentPage * this.pageSize;
        
        // 调用API获取图片
        const result = await getPic(this.searchQuery, skip);
        
        // 处理结果
        let newImages = [];
        if (result && result.results && result.results.length > 0) {
          // 新版API返回格式
          newImages = result.results;
        } else if (result && Array.isArray(result) && result.length > 0) {
          // 兼容旧版API返回格式
          newImages = result;
        } else {
          if (isRefresh) {
            this.images = [];
          }
          this.hasMore = false;
          this.isLoading = false;
          this.isLoadingMore = false;
          this.isRefreshing = false;
          return;
        }
        
        if (isRefresh) {
          this.images = newImages;
        } else {
          this.images = [...this.images, ...newImages];
        }
        
        // 将新图片添加到队列
        this.addImagesToQueue(newImages);
        
        this.currentPage++;
        this.hasMore = newImages.length >= this.pageSize;
      } catch (error) {
        console.error('加载图片失败:', error);
        uni.showToast({
          title: '加载图片失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
        this.isLoadingMore = false;
        this.isRefreshing = false;
      }
    },
    
    // 添加图片到队列
    addImagesToQueue(newImages) {
      // 将新图片添加到队列
      this.imageQueue = [...this.imageQueue, ...newImages];
      
      // 如果队列没有在处理中，开始处理队列
      if (!this.isProcessingQueue) {
        this.processImageQueue();
      }
    },
    
    // 处理图片队列
    processImageQueue() {
      if (this.imageQueue.length === 0) {
        this.isProcessingQueue = false;
        return;
      }
      
      this.isProcessingQueue = true;
      
      // 从队列中取出一张图片
      const image = this.imageQueue.shift();
      
      // 预加载图片获取尺寸
      this.preloadImage(image.imageUrl || image.url).then(dimensions => {
        // 计算宽高比
        const aspectRatio = dimensions.height / dimensions.width;
        
        // 添加到高度较低的列
        const tempImage = { ...image, aspectRatio };
        const estimatedHeight = 375 * aspectRatio / 2; // 假设屏幕宽度为750rpx，每列宽度为375rpx
        
        if (this.leftColumnHeight <= this.rightColumnHeight) {
          this.leftColumnImages.push(tempImage);
          this.leftColumnHeight += estimatedHeight;
        } else {
          this.rightColumnImages.push(tempImage);
          this.rightColumnHeight += estimatedHeight;
        }
        
        // 延迟200ms处理下一张图片
        setTimeout(() => {
          this.processImageQueue();
        }, 20);
      }).catch(() => {
        // 如果加载失败，使用默认比例
        const tempImage = { ...image, aspectRatio: 1 };
        
        if (this.leftColumnHeight <= this.rightColumnHeight) {
          this.leftColumnImages.push(tempImage);
          this.leftColumnHeight += 100;
        } else {
          this.rightColumnImages.push(tempImage);
          this.rightColumnHeight += 100;
        }
        
        // 延迟200ms处理下一张图片
        setTimeout(() => {
          this.processImageQueue();
        }, 20);
      });
    },
    
    // 预加载图片获取尺寸
    preloadImage(url) {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: url,
          success: (res) => {
            resolve({
              width: res.width,
              height: res.height
            });
          },
          fail: (err) => {
            console.error('获取图片信息失败:', err);
            reject(err);
          }
        });
      });
    },
    
    // 图片加载完成后更新列高度
    onImageLoad(item, index, column) {
      // 获取图片信息
      const query = uni.createSelectorQuery();
      query.select(column === 'left' ? `.waterfall-column:nth-child(1) .waterfall-item:nth-child(${index + 1}) .waterfall-image` : 
                                      `.waterfall-column:nth-child(2) .waterfall-item:nth-child(${index + 1}) .waterfall-image`)
        .boundingClientRect(data => {
          if (!data) return;
          
          // 图片已经加载完成，不需要再更新高度
        }).exec();
    },
    
    // 获取图片在原始数组中的索引
    getOriginalIndex(index, column) {
      if (column === 'left') {
        // 左列图片的原始索引
        let count = 0;
        for (let i = 0; i < this.images.length; i++) {
          if (this.leftColumnImages.some(img => 
            (img.imageUrl && this.images[i].imageUrl && img.imageUrl === this.images[i].imageUrl) || 
            (img.url && this.images[i].url && img.url === this.images[i].url))) {
            if (count === index) return i;
            count++;
          }
        }
      } else {
        // 右列图片的原始索引
        let count = 0;
        for (let i = 0; i < this.images.length; i++) {
          if (this.rightColumnImages.some(img => 
            (img.imageUrl && this.images[i].imageUrl && img.imageUrl === this.images[i].imageUrl) || 
            (img.url && this.images[i].url && img.url === this.images[i].url))) {
            if (count === index) return i;
            count++;
          }
        }
      }
      return 0;
    },
    
    // 搜索图片
    handleSearch() {
      if (!this.searchQuery.trim()) {
        this.clearSearch();
        return;
      }
      
      // 保存原始查询
      this.originalQuery = this.searchQuery;
      // 清空之前的翻译结果
      this.translatedQuery = '';
      
      // 显示翻译区域和加载状态
      this.showTranslation = false;
      this.isAILoading = true;
      
      // 显示加载提示
      uni.showLoading({
        title: '翻译中...',
        mask: true
      });
      
      // 设置翻译超时处理
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
      }
      
      this.translationTimeout = setTimeout(() => {
        if (this.isAILoading) {
          console.error('翻译超时');
          this.handleTranslationTimeout();
        }
      }, this.maxTranslationTime);
      
      // 调用AI进行翻译
      if (this.$refs.aiChat) {
        // 构建系统提示
        const systemPrompt = `你是一个专业的图像标签翻译专家。你的任务是将用户输入的中文查询词转化为英文标签，用于搜索图像。
请将用户输入的中文词语或短语转化为对应的英文标签或描述词。
回复时只需提供翻译后的英文词语或短语，不需要任何解释或额外文字。`;

        // 创建包含系统提示的消息历史
        const messages = [
          { role: 'system', content: systemPrompt }
        ];
        
        this.$refs.aiChat.sendMessage(this.searchQuery, messages);
      } else {
        // 如果AI组件不可用，直接使用原始查询
        this.handleTranslationError(new Error('AI组件未就绪'));
      }
    },
    
    // 处理翻译超时
    handleTranslationTimeout() {
      // 清除超时计时器
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
      }
      
      // 隐藏加载提示
      uni.hideLoading();
      
      // 更新状态
      this.isAILoading = false;
      
      // 显示超时提示
      uni.showToast({
        title: '翻译超时，使用原文搜索',
        icon: 'none',
        duration: 2000
      });
      
      // 使用原始内容搜索
      this.doSearch(this.originalQuery);
      
      // 尝试重置AI组件
      if (this.$refs.aiChat && typeof this.$refs.aiChat.reset === 'function') {
        this.$refs.aiChat.reset();
      }
    },
    
    // 处理AI消息
    handleAIMessage(message) {
      // 对于流式返回，直接更新翻译结果
      if (message && message.content) {
        this.translatedQuery += message.content;
        
        // 首次收到消息时显示翻译区域
        if (!this.showTranslation && this.translatedQuery.trim() !== '') {
          this.showTranslation = true;
          uni.hideLoading();
        }
      }
    },
    
    // 处理AI消息更新完成
    handleMessagesUpdated(messages) {
      if (messages && messages.length > 0) {
        const lastMessage = messages[messages.length - 1];
        if (lastMessage.role === 'assistant' && lastMessage.content) {
          // 清除超时计时器
          if (this.translationTimeout) {
            clearTimeout(this.translationTimeout);
            this.translationTimeout = null;
          }
          
          // 确保翻译结果完整
          this.translatedQuery = lastMessage.content.trim();
          
          // 显示翻译区域
          this.showTranslation = true;
          
          // 隐藏加载提示
          uni.hideLoading();
          
          // 更新状态
          this.isAILoading = false;
        }
      }
    },
    
    // 处理AI加载状态
    handleAILoading(loading) {
      this.isAILoading = loading;
      
      // 加载结束时清除超时计时器
      if (!loading && this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
        
        // 隐藏加载提示
        uni.hideLoading();
      }
    },
    
    // 处理AI错误
    handleAIError(error) {
      console.log('AI错误:', error);
      
      // 如果是SSE连接正常关闭，且有翻译内容，则视为翻译完成
      if (error && error.type === 'SSE_CLOSED' && this.translatedQuery.trim() !== '') {
        console.log('SSE连接正常关闭，翻译完成');
        
        // 清除超时计时器
        if (this.translationTimeout) {
          clearTimeout(this.translationTimeout);
          this.translationTimeout = null;
        }
        
        // 更新状态
        this.isAILoading = false;
        
        // 隐藏加载提示
        uni.hideLoading();
        
        // 显示翻译区域
        this.showTranslation = true;
        
        return;
      }
      
      // 其他错误情况，调用错误处理逻辑
      this.handleTranslationError(error);
    },
    
    // 处理翻译错误
    handleTranslationError(error) {
      console.error('翻译错误:', error);
      
      // 清除超时计时器
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
      }
      
      // 更新状态
      this.isAILoading = false;
      
      // 隐藏加载提示
      uni.hideLoading();
      
      // 如果已有翻译内容，则不显示错误提示，直接使用现有内容
      if (this.translatedQuery.trim() !== '') {
        console.log('虽有错误但已有翻译内容，继续使用');
        this.showTranslation = true;
        return;
      }
      
      // 没有翻译内容才显示错误提示
      uni.showToast({
        title: '翻译失败，使用原文搜索',
        icon: 'none',
        duration: 2000
      });
      
      // 使用原始内容搜索
      this.doSearch(this.originalQuery);
    },
    
    // 使用翻译后的内容进行搜索
    useTranslation() {
      // 阻止超时处理
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
      }
      
      this.showTranslation = false;
      this.doSearch(this.translatedQuery);
    },
    
    // 取消翻译，使用原始内容搜索
    cancelTranslation() {
      // 阻止超时处理
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
      }
      
      this.showTranslation = false;
      this.doSearch(this.originalQuery);
    },
    
    // 清除搜索
    clearSearch() {
      // 阻止超时处理
      if (this.translationTimeout) {
        clearTimeout(this.translationTimeout);
        this.translationTimeout = null;
      }
      
      this.searchQuery = '';
      this.originalQuery = '';
      this.translatedQuery = '';
      this.showTranslation = false;
      this.isAILoading = false;
      
      this.images = [];
      this.leftColumnImages = [];
      this.rightColumnImages = [];
      this.leftColumnHeight = 0;
      this.rightColumnHeight = 0;
      this.imageQueue = []; // 清空队列
      this.isProcessingQueue = false;
      this.currentPage = 0;
      this.hasMore = true;
      this.loadImages(true);
    },
    
    // 执行实际搜索
    doSearch(query) {
      this.images = [];
      this.leftColumnImages = [];
      this.rightColumnImages = [];
      this.leftColumnHeight = 0;
      this.rightColumnHeight = 0;
      this.imageQueue = []; // 清空队列
      this.isProcessingQueue = false;
      this.currentPage = 0;
      this.hasMore = true;
      
      // 更新搜索关键词并加载图片
      this.searchQuery = query;
      this.loadImages(true);
    },
    
    // 加载更多图片
    loadMoreImages() {
      if (this.isLoading || this.isLoadingMore || !this.hasMore) return;
      
      this.isLoadingMore = true;
      this.loadImages();
    },
    
    // 下拉刷新
    refreshImages() {
      this.isRefreshing = true;
      
      // 显示加载提示
      uni.showLoading({
        title: '刷新中...',
        mask: true
      });
      
      // 重置数据并重新加载
      this.images = [];
      this.leftColumnImages = [];
      this.rightColumnImages = [];
      this.leftColumnHeight = 0;
      this.rightColumnHeight = 0;
      this.imageQueue = [];
      this.isProcessingQueue = false;
      this.currentPage = 0;
      this.hasMore = true;
      
      this.loadImages(true).then(() => {
        uni.hideLoading();
        this.isRefreshing = false;
        
        // 显示刷新成功提示
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1500
        });
      }).catch(() => {
        uni.hideLoading();
        this.isRefreshing = false;
      });
    },
    
    // 切换布局模式
    toggleLayout() {
      this.isDoubleColumn = !this.isDoubleColumn;
    },
    
    // 预览图片
    previewImage(url, index) {
      const urls = this.images.map(img => img.imageUrl || img.url);
      uni.previewImage({
        urls: urls,
        current: url,
        indicator: 'number',
        loop: true,
        longPressActions: {
          itemList: ['保存图片', '收藏'],
          success: function(data) {
            if (data.tapIndex === 0) {
              // 保存图片
              uni.saveImageToPhotosAlbum({
                url: url,
                success: function() {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail: function() {
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            } else if (data.tapIndex === 1) {
              // 收藏功能
              uni.showToast({
                title: '收藏成功',
                icon: 'success'
              });
            }
          },
          fail: function(err) {
            console.log(err);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.picshow-container {
  min-height: 100vh;
  background-color: #121212;
  color: var(--text-color);
  padding: 0;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.picshow-header-container {
  position: absolute; /* 改为绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #121212;
  transition: transform 0.3s ease;
  
  &.header-hidden {
    transform: translateY(-100%);
  }
}

.picshow-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 40rpx;
  
  .nav-back {
    margin-right: 20rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    flex: 1;
  }
  
  .layout-toggle {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 40rpx;
  
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 40rpx;
    padding: 0 20rpx;
    height: 80rpx;
    margin-right: 20rpx;
    
    .search-input {
      flex: 1;
      height: 80rpx;
      color: var(--text-color);
      margin: 0 20rpx;
    }
  }
  
  .search-btn {
    background-color: var(--primary-color);
    color: #fff;
    height: 80rpx;
    padding: 0 30rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
}

/* 翻译结果显示区域 */
.translate-container {
  margin: 0 40rpx 30rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 20rpx;
  border-left: 4rpx solid var(--primary-color);
}

.translate-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  
  .original-text, .translated-text {
    font-size: 28rpx;
    line-height: 1.5;
    margin-bottom: 10rpx;
  }
  
  .original-text {
    color: var(--text-color-secondary);
  }
  
  .translated-text {
    color: var(--primary-color);
    font-weight: bold;
  }
  
  .translated-text-container {
    display: flex;
    align-items: center;
  }
  
  .typing-indicator {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    
    .dot {
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      background-color: var(--primary-color);
      margin: 0 4rpx;
      animation: dot-flashing 1s infinite linear alternate;
      
      &:nth-child(2) {
        animation-delay: 0.2s;
      }
      
      &:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
  }
}

.translate-actions {
  display: flex;
  justify-content: flex-end;
  
  .translate-action {
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
    margin-left: 20rpx;
    
    &:first-child {
      background-color: var(--primary-color);
      color: #fff;
    }
    
    &:last-child {
      background-color: rgba(255, 255, 255, 0.1);
      color: var(--text-color);
    }
  }
}

.picshow-content {
  height: 100vh; /* 始终保持全屏高度 */
  padding-top: 400rpx; /* 增加为头部预留的空间，考虑到翻译显示区域 */
  transition: padding-top 0.3s ease; /* 平滑过渡 */
  box-sizing: border-box;
  
  &.fullscreen {
    padding-top: 0; /* 全屏模式下不预留空间 */
  }
}

.loading-container, .empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid rgba(var(--primary-color-rgb), 0.3);
    border-top: 4rpx solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .loading-text, .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: var(--text-color-secondary);
  }
  
  .empty-action {
    margin-top: 30rpx;
    padding: 15rpx 40rpx;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 瀑布流布局 */
.waterfall-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.waterfall-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  &:first-child {
    margin-right: 2rpx;
  }
}

.waterfall-item {
  width: 100%;
  margin-bottom: 2rpx;
  background-color: var(--card-bg);
  overflow: hidden;
  position: relative;
}

.image-placeholder {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  position: relative;
}

.waterfall-image {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* 单列布局 */
.single-column-container {
  width: 100%;
}

.single-column-item {
  width: 100%;
  margin-bottom: 2rpx;
  background-color: var(--card-bg);
  overflow: hidden;
  position: relative;
}

.single-column-image {
  width: 100%;
  display: block;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: var(--text-color-secondary);
  font-size: 26rpx;
}

.float-action, .float-refresh {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(var(--primary-color-rgb), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.float-action {
  right: 30rpx;
  bottom: 100rpx;
}

.float-refresh {
  right: 30rpx;
  bottom: 200rpx;
}

@keyframes dot-flashing {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
</style> 